import 'package:flutter/material.dart';

/// 利用wrap完成搜索界面的布局
///
///

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('搜索界面布局'),
        backgroundColor: Colors.blue,
      ),
      body: const Mywrap(),
    ),
  ));
}

class Mywrap extends StatelessWidget {
  const Mywrap({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView(
          padding: EdgeInsets.all(10),
          children: [
            Row(
              children: [
                Text(
                  '热搜',
                  style: Theme.of(context).textTheme.titleLarge,
                )
              ],
            ),
            Divider(),
            Wrap(
              spacing: 10,
              runSpacing: 10,
              children: [
                Mybutton('Flutter', btnclick: () {
                  print('flutter');
                }),
                Mybutton('羽绒服', btnclick: () {}),
                Mybutton('golang实战教程', btnclick: () {}),
                Mybutton('老乡鸡', btnclick: () {}),
                Mybutton('python爬虫', btnclick: () {}),
                Mybutton('老乡鸡代下单', btnclick: () {}),
                Mybutton('篮球', btnclick: () {}),
              ],
            ),
            const SizedBox(height: 10),
            Row(
              children: [
                Text(
                  '历史记录',
                  style: Theme.of(context).textTheme.titleLarge,
                ),
              ],
            ),
            const Divider(),
            const Column(
              children: [
                ListTile(
                  title: Text('女装'),
                ),
                Divider(),
                ListTile(
                  title: Text('手机'),
                ),
                Divider(),
                ListTile(
                  title: Text('笔记本'),
                ),
                Divider(),
              ],
            ),
            Container(
              margin: EdgeInsets.only(left: 20, top: 80, right: 20),
              // color: Colors.green,
              height: 50,
              child: OutlinedButton.icon(
                onPressed: () {},
                label: Text('清空历史记录'),
                icon: Icon(Icons.delete),
              ),
            )
          ],
        )
      ],
    );
  }
}

class Mybutton extends StatelessWidget {
  String title;
  VoidCallback btnclick;
  Mybutton(this.title, {super.key, required this.btnclick});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: btnclick,
      style: const ButtonStyle(
          backgroundColor: WidgetStatePropertyAll(Colors.black12),
          foregroundColor: WidgetStatePropertyAll(Colors.black54)),
      child: Text(title),
    );
  }
}
